<template>
  <common-info-dialog
    :visible.sync="dialogShow"
    @cancel="close"
    :infoLoading="infoLoading"
    :title="dialogTitle"
  >
    <common-table :data="diskList" class="table-container">
      <el-table-column prop="dirName" label="盘符路径" show-overflow-tooltip />
      <el-table-column prop="sysTypeName" label="文件系统" />
      <el-table-column prop="typeName" label="盘符类型" show-overflow-tooltip />
      <el-table-column prop="total" label="总大小" width="100" />
      <el-table-column prop="free" label="可用大小" width="100" />
      <el-table-column prop="used" label="已用大小" width="100">
        <template slot-scope="scope">
          <div
            :style="{
              color: `${scope.row.usage > maxDisk ? '#f00' : ''}`,
            }"
          >
            {{ scope.row.used }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="usage" label="已用百分比" width="100"
        ><template slot-scope="scope">
          <div
            :style="{
              color: `${scope.row.usage > maxDisk ? '#f00' : ''}`,
            }"
          >
            {{ scope.row.usage }}%
          </div></template
        ></el-table-column
      >
    </common-table>
  </common-info-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogTitle: "磁盘详情",
      dialogShow: false,
      diskList: [],
      infoLoading: false,
    };
  },
  props: {
    maxDisk: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    close() {
      this.dialogShow = false;
    },
    show(data) {
      this.diskList = data;
      this.dialogShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.table-container {
  padding: 0 18px;
}
</style>
